import AlertFill from "@/assets/image/icons/alert-fill.svg";
import LGV from "@/assets/image/icons/LGV.svg";
import Motorcycle from "@/assets/image/icons/Motorcycle.svg";
import privatecar from "@/assets/image/icons/privatecar.svg";
import FileUpload from "@/assets/image/patterns/File Upload.png";
import upload from "@/assets/image/patterns/Upload.png";
import { StyledAgree, StyledCancel } from "@/components/button";
import {
  StyledAlertCircle,
  StyledTextAlign,
  StyledTipsText,
  UploadTitle,
} from "@/components/common-styled";
import CustomModal from "@/components/customModal";
import CustomTag from "@/components/tag";
import UpoladItem from "@/components/upload-item";
import NewUploadItem from "@/components/upload-item/new-upload";
import UploadDragger from "@/components/upload-item/upload-dragger";
import { VehicleData } from "@/pages/register-license/register-details/types";
import { consolidateData } from "@/pages/register-license/register-details/utils";
import useStore from "@/store/configStore";
import { CheckCircleOutlined, CloseOutlined } from "@ant-design/icons";
import {
  ProCard,
  ProForm,
  ProFormCheckbox,
  ProFormGroup,
  ProFormSelect,
  ProFormText,
  ProFormUploadDragger,
} from "@ant-design/pro-components";
import {
  Alert,
  Card,
  Collapse,
  Descriptions,
  Divider,
  Form,
  message,
  Space,
  Switch,
  Tooltip,
  Typography,
} from "antd";
import { useRef, useState } from "react";
import styled from "styled-components";
import { history, useLocation } from "umi";
import SubmissionCheckbox from "./componnets/submission-checkbox";
import "./index.less";
// import { transformStaffCardData } from "./utils";
import { CustomSubTitle } from "@/components/customTitle";
import { getIdVerifyUpdate } from "@/services/identity-verification";
import { convertBooleansToYN } from "@/utils";
import { processData } from "./utils";
const { Title } = Typography;
const { Panel } = Collapse;
const CenterDiv = styled("div")`
   display: "felex",
   alignItems: "center"
`;

const IdentityForm = () => {
  const location = useLocation();
  // 获取查询参数对象
  const queryParams = new URLSearchParams(location.search);
  console.log(queryParams, "queryParams");

  // 获取参数 company 的值
  const valueOfCompany = queryParams.get("company");
  console.log(valueOfCompany, "valueOfCompany");

  const mobile = queryParams.get("mobile") || "";
  const crewMember = queryParams.get("crewMember") || "";
  console.log(crewMember, "crewMember");
  const specify = queryParams.get("specify") || "";

  const [selectedValue, setSelectedValue] = useState(valueOfCompany);
  const [tempValue, setTempValue] = useState<string | undefined>(undefined);
  // 控制模态框的显示状态
  const [isModalOpen, setIsModalOpen] = useState(false);
  // 控制模态框的显示状态
  const [isModalOpen1, setIsModalOpen1] = useState(false);
  // company
  const [isModalOpen2, setIsModalOpen2] = useState(false);
  // LPN
  const [LPN, setLPN] = useState(false);
  const [collapsed, setCollapsed] = useState(true);
  const [showOtherElement, setShowOtherElement] = useState(true);
  const [isNeedSubmit, setIsNeedSubmit] = useState(false);
  const changeShowModal = () => {
    setIsModalOpen(!isModalOpen);
  };

  //company switch
  const handleSelectChange = (value: any) => {
    setIsModalOpen2(true);
    setTempValue(value);
    // setSelectedValue(value);
  };

  const handleSwitchChange = (checked: boolean) => {
    console.log("Switch changed to:", checked);
    setCollapsed(!checked);
    setIsModalOpen(!checked);
  };

  const handleCheckboxChange = (e: any) => {
    setShowOtherElement(!e.target.checked);
  };

  const [form] = Form.useForm();
  const formRef = useRef(form);
  const onFinish = async () => {
    const formData = form.getFieldsValue();
    console.log(formData, "formData");
    const { privateCar, motorcycle, LGV } = formData;
    const vehicles = [privateCar, motorcycle, LGV].filter(
      (item) => item !== null && item !== undefined
    ) as VehicleData[];
    const result1 = await consolidateData(vehicles);
    console.log(result1, "result1");
    // 确保 combinedStaffCards 已经定义并且是有效的
    if (result1.lpnData.length === 0) {
      setLPN(true);
      return;
    }
    setIsNeedSubmit(true);
    // 处理提交逻辑
  };
  const handleOk = () => {
    console.log("OK clicked");
    setCollapsed(false);
    setIsModalOpen(false);
  };

  const handleCancel = () => {
    console.log("Cancel clicked");
    form.setFieldValue("supplementary", null);
    setIsModalOpen(false);
  };

  const handleOk1 = async () => {
    const formData = form.getFieldsValue();
    console.log(formData, "formData");
    const {
      privateCar,
      motorcycle,
      supplementary,
      LGV,
      HKAA,
      ArAPermit,
      checkGroup,
    } = formData;

    // 过滤出有效的车辆数据
    const vehicles = [privateCar, motorcycle, LGV].filter(
      (item) => item !== null && item !== undefined
    ) as VehicleData[];

    try {
      // 等待合并车辆数据
      //@ts-ignore
      const result1 = await consolidateData(vehicles);
      console.log(result1, "result1");
      // 确保 combinedStaffCards 已经定义并且是有效的
      if (!result1) {
        throw new Error("combinedStaffCards is undefined or empty");
      }

      //过滤证件信息
      const resq1 = await processData(ArAPermit, HKAA, supplementary);
      console.log(resq1, "combinedStaffCards");

      // 创建 totalData 对象，包含所有需要的信息
      const totalData = {
        userId: "test1",
        comId: "test2",
        companyId: "test3",
        ...convertBooleansToYN(checkGroup),
        ...result1,
        ...resq1,
      };

      console.log(totalData, "totalDatas");

      // 发起请求，确保处理返回的数据
      const response = await getIdVerifyUpdate(totalData);
      return;
      console.log(response, "response from getIdVerifyUpdate");
      history.push("/identity/success");
      // 如果请求成功，可以在这里处理后续逻辑
      // history.push("/register/success");
    } catch (error) {
      // 处理错误
      console.error(error, "error");
      // 你可以选择在这里显示错误消息，例如 message.error(error?.message);
    }
  };

  const handleCancel1 = () => {
    setIsModalOpen1(false);
  };

  const handleOk2 = () => {
    setIsModalOpen2(false);
  };

  const handleCancel2 = () => {
    if (tempValue !== undefined) {
      setSelectedValue(tempValue);
    }
    setIsModalOpen2(false);
  };

  const handleOk3 = () => {
    setLPN(false);
    setIsNeedSubmit(true);
  };

  const handleCancel3 = () => {
    setLPN(false);
  };
  //错误验证拦截
  const onFinishFailed = () => {
    message.error({ content: "please check required field" });
    const firstInvalidField = document.querySelector(
      ".ant-form-item-has-error"
    );
    if (firstInvalidField) {
      firstInvalidField.scrollIntoView({ behavior: "smooth" });
    }
  };

  const { isLoggedIn } = useStore();
  // useEffect(() => {
  //   // 根据查询参数的值调用相应的方法
  //   logout();
  //   console.log("Form values isLoggedIn=", isLoggedIn);
  // }, [logout]);

  const htmlContent =
    "Please update your account's identity verification. An incorrect document has been uploaded.";

  const handleCancelDeleted = () => {
    form.setFieldValue("ArAPermit", null);
  };
  const handleCancelDeleted1 = () => {
    form.setFieldValue("HKAA", null);
  };

  const handleClickNext = () => {
    console.log(222222);
    setIsModalOpen1(true);
  };

  return (
    <>
      <div className="identity-form">
        <div className="title">
          {isLoggedIn === "error"
            ? "Edit My Profile"
            : "IdentityForm Verification & License Plate Number Registration"}
        </div>

        {isLoggedIn === "error" && (
          <>
            <Alert
              style={{ marginBottom: "40px" }}
              onClick={() => {
                history.push("/identity");
              }}
              message="Account Identity Verification has been Declined"
              type="error"
              showIcon={true}
              icon={<img src={AlertFill} alt="SVG Image" />}
              description={
                <div dangerouslySetInnerHTML={{ __html: htmlContent }} />
              }
            />
          </>
        )}
        <div className="identity-content">
          <ProForm
            initialValues={{}}
            form={form}
            onFinish={onFinish}
            onFinishFailed={onFinishFailed}
            submitter={{
              render: () => (
                <StyledTextAlign>
                  <Space size="large">
                    <StyledCancel
                      onClick={() => formRef.current?.resetFields()}
                    >
                      Cancel
                    </StyledCancel>
                    <StyledAgree
                      onClick={
                        isNeedSubmit
                          ? handleClickNext
                          : () => formRef.current?.submit()
                      }
                      type="default"
                    >
                      {isNeedSubmit ? "Submit" : "Next"}
                    </StyledAgree>
                  </Space>
                </StyledTextAlign>
              ),
            }}
          >
            <div className="basic-information">
              <CustomSubTitle>Basic Information</CustomSubTitle>
              <Descriptions layout="vertical">
                <Descriptions.Item label="Full Name (English)">
                  LAM, YAN TING SOPHIE
                </Descriptions.Item>
                <Descriptions.Item label="Full Name (Chinese)">
                  -
                </Descriptions.Item>
                <Descriptions.Item label="Email">
                  lamyanting@hkaa.com
                </Descriptions.Item>
                <Descriptions.Item
                  label={
                    <CenterDiv>
                      Mobile (OTP-capable) &emsp;
                      <Tooltip title="Only accept local (HK) mobile registration.">
                        <StyledAlertCircle />
                      </Tooltip>
                    </CenterDiv>
                  }
                >
                  <ProFormText
                    className=""
                    disabled
                    fieldProps={{
                      prefix: "+852",
                      size: "large",
                      suffix: (
                        <>
                          <CustomTag
                            bgColor="#e4f6ea"
                            color="#26a461"
                            title="Verified"
                            titleColor="#26a461"
                            icons={<CheckCircleOutlined />}
                          ></CustomTag>
                        </>
                      ),
                      value: mobile || "",
                    }}
                  ></ProFormText>
                </Descriptions.Item>
                <Descriptions.Item label="Account ID no.">
                  00000001
                </Descriptions.Item>
                <Descriptions.Item
                  label="Company"
                  contentStyle={{ display: "flex", flexDirection: "column" }}
                >
                  <ProFormSelect
                    name="select"
                    fieldProps={{
                      size: "large",
                      value: selectedValue,
                      onChange: handleSelectChange,
                    }}
                    options={[
                      {
                        label: "Hong Kong Airport Authority",
                        value: "option1",
                      },
                      { label: "Ground Staff", value: "option2" },
                      { label: "Hong Kong Crew Member", value: "option3" },
                      { label: "Other", value: "option4" },
                    ]}
                  ></ProFormSelect>
                  {selectedValue === "option2" && (
                    <ProFormCheckbox
                      name="crewMember"
                      fieldProps={{
                        onChange: handleCheckboxChange,
                        //@ts-ignore
                        checked: crewMember,
                      }}
                    >
                      I am a crew member.
                      <Tooltip
                        placement="bottom"
                        autoAdjustOverflow={true}
                        title="Upload crew member certificate is a must"
                      >
                        <StyledAlertCircle />
                      </Tooltip>
                    </ProFormCheckbox>
                  )}
                  {selectedValue === "option3" && (
                    <ProFormCheckbox name="Staff2222">
                      I am a crew member.
                      <Tooltip
                        placement="bottom"
                        autoAdjustOverflow={true}
                        title="Upload crew member certificate is a must"
                      >
                        <StyledAlertCircle />
                      </Tooltip>
                    </ProFormCheckbox>
                  )}
                  {selectedValue === "option4" && (
                    <ProFormText
                      width="md"
                      name="Specify"
                      placeholder={"Please Enter"}
                      label="Specify"
                      fieldProps={{
                        //@ts-ignore
                        // value: specify,
                        defaultValue: specify,
                      }}
                    />
                  )}
                </Descriptions.Item>
              </Descriptions>

              <Divider plain></Divider>
            </div>

            <div className="compulsory-upload">
              <Title level={4}>Compulsory Document Upload</Title>
              {selectedValue === "option1" && (
                <>
                  <NewUploadItem
                    clickout={handleCancelDeleted}
                    name="ArAPermit"
                    leftText="ARA Permit"
                    content={[
                      {
                        ContentItem: "Please upload ARA Permit",
                        name: "ArAupload",
                        required: false,
                        cardTitle:
                          "ARA Permit Information (Extracted from Image Uploaded)",
                        formText: [
                          {
                            name: "Full Name (English)",
                            textName: "englishName",
                            value: "test",
                          },
                          {
                            name: "Full Name (Chinese)",
                            textName: "chineseName",
                            value: "test1",
                          },
                          {
                            name: "Company",
                            textName: "company",
                            value: "test12",
                          },
                          {
                            name: "ARA Permit Expiry Date",
                            textName: "expireDate",
                            value: "test12333",
                          },
                        ],
                      },
                    ]}
                  />

                  <NewUploadItem
                    clickout={handleCancelDeleted1}
                    name="HKAA"
                    leftText="HKAA Staff Card + Airport Staff Octopus Card"
                    content={[
                      {
                        ContentItem:
                          "Please upload HKAA Staff Card (The side with Company Name, Staff Name, Staff Number, and Staff Photo) ",
                        name: "HKAAUpload",
                        required: false,
                        cardTitle:
                          "ARA Permit Information (Extracted from Image Uploaded)",
                        formText: [
                          {
                            name: "Full Name (English)",
                            textName: "englishName",
                            value: "englishName",
                          },
                          {
                            name: "Full Name (Chinese)",
                            textName: "chineseName",
                            value: "chineseName",
                          },
                          {
                            name: "Company",
                            textName: "company",
                            value: "test12",
                          },
                          {
                            name: "ARA Permit Expiry Date",
                            textName: "expireDate",
                            value: "test12333",
                          },
                        ],
                      },
                      {
                        ContentItem:
                          "Please upload Airport Staff Octopus Card (Front Side)",
                        name: "Front",
                        required: false,
                      },
                      {
                        ContentItem:
                          "Please upload Airport Staff Octopus Card (Back Side)",
                        name: "Back",
                        required: false,
                        cardTitle:
                          "Octopus Information (Extracted from Image Uploaded)",
                        formText: [
                          {
                            name: "Octopus No. (Exclude the no. in bracket)",
                            value: "700001111",
                          },
                        ],
                      },
                    ]}
                  />
                </>
              )}
              {selectedValue === "option2" && (
                <>
                  {!showOtherElement ? (
                    <>
                      <ProCard hoverable bordered>
                        <UploadTitle>Please upload Crew ID Card</UploadTitle>
                        <UploadDragger
                          required={true}
                          childrens={
                            <>
                              <ProFormGroup>
                                <ProFormText
                                  width="md"
                                  name="FullName(English)5"
                                  placeholder={"Please Enter"}
                                  label="Full Name (English)"
                                />
                                <ProFormText
                                  width="md"
                                  name="FullName(Chinese)5"
                                  placeholder={"Please Enter"}
                                  label="Full Name (Chinese)"
                                />
                                <ProFormText
                                  width="md"
                                  name="Staff No.5"
                                  placeholder={"Please Enter"}
                                  label="Staff No."
                                />
                              </ProFormGroup>
                            </>
                          }
                          title={"Crew ID Card Information"}
                          name="Staff5"
                        />
                      </ProCard>
                    </>
                  ) : (
                    <>
                      <NewUploadItem
                        clickout={handleCancelDeleted}
                        name="ArAPermit"
                        leftText="ARA Permit"
                        content={[
                          {
                            ContentItem: "Please upload ARA Permit",
                            name: "StaffCard",
                            required: false,
                            cardTitle:
                              "ARA Permit Information (Extracted from Image Uploaded)",
                            formText: [
                              {
                                name: "test",
                                value: "test",
                              },
                              {
                                name: "test1",
                                value: "test1",
                              },
                              {
                                name: "test12",
                                value: "test12",
                              },
                              {
                                name: "test122",
                                value: "test12333",
                              },
                            ],
                          },
                        ]}
                      />

                      <NewUploadItem
                        clickout={handleCancelDeleted1}
                        name="HKAA"
                        leftText="HKAA Staff Card + Airport Staff Octopus Card"
                        content={[
                          {
                            ContentItem:
                              "Company Staff Card + Airport Staff Octopus CardPlease upload Company Staff Card (The side with Company Name, Staff Name, Staff Number, and Staff Photo)  ",
                            name: "hkaa",
                            required: false,
                            cardTitle:
                              "ARA Permit Information (Extracted from Image Uploaded)",
                            formText: [
                              {
                                name: "test",
                                value: "test",
                              },
                              {
                                name: "test1",
                                value: "test1",
                              },
                              {
                                name: "test12",
                                value: "test12",
                              },
                              {
                                name: "test122",
                                value: "test12333",
                              },
                            ],
                          },
                          {
                            ContentItem:
                              "Please upload Airport Staff Octopus Card (Front Side)",
                            name: "Front",
                            required: false,
                          },
                          {
                            ContentItem:
                              "Please upload Airport Staff Octopus Card (Back Side)",
                            name: "Back",
                            required: false,
                            cardTitle:
                              "Octopus Information (Extracted from Image Uploaded)",
                            formText: [
                              {
                                name: "Octopus No. (Exclude the no. in bracket)",
                                value: "700001111",
                              },
                            ],
                          },
                        ]}
                      />
                    </>
                  )}
                </>
              )}
              {selectedValue === "option3" && (
                <>
                  <ProCard hoverable bordered>
                    <div>Please upload Crew ID Card</div>
                    <UploadDragger
                      required={true}
                      childrens={
                        <>
                          <ProFormGroup>
                            <ProFormText
                              width="md"
                              name="FullName(English)5"
                              placeholder={"Please Enter"}
                              label="Full Name (English)"
                            />
                            <ProFormText
                              width="md"
                              name="FullName(Chinese)5"
                              placeholder={"Please Enter"}
                              label="Full Name (Chinese)"
                            />
                            <ProFormText
                              width="md"
                              name="Staff No.5"
                              placeholder={"Please Enter"}
                              label="Staff No."
                            />
                          </ProFormGroup>
                        </>
                      }
                      title={"Crew ID Card Information"}
                      name="Staff5"
                    />
                  </ProCard>
                </>
              )}

              {selectedValue === "option4" && (
                <>
                  <NewUploadItem
                    clickout={handleCancelDeleted}
                    name="ArAPermit"
                    leftText="ARA Permit"
                    content={[
                      {
                        ContentItem: "Please upload ARA Permit",
                        name: "22222",
                        required: false,
                        cardTitle:
                          "ARA Permit Information (Extracted from Image Uploaded)",
                        formText: [
                          {
                            name: "test",
                            value: "test",
                          },
                          {
                            name: "test1",
                            value: "test1",
                          },
                          {
                            name: "test12",
                            value: "test12",
                          },
                          {
                            name: "test122",
                            value: "test12333",
                          },
                        ],
                      },
                    ]}
                  />

                  <NewUploadItem
                    clickout={handleCancelDeleted1}
                    name="HKAA"
                    leftText="HKAA Staff Card + Airport Staff Octopus Card"
                    content={[
                      {
                        ContentItem:
                          "Company Staff Card + Airport Staff Octopus CardPlease upload Company Staff Card (The side with Company Name, Staff Name, Staff Number, and Staff Photo)  ",
                        name: "22222",
                        required: false,
                        cardTitle:
                          "ARA Permit Information (Extracted from Image Uploaded)",
                        formText: [
                          {
                            name: "test",
                            value: "test",
                          },
                          {
                            name: "test1",
                            value: "test1",
                          },
                          {
                            name: "test12",
                            value: "test12",
                          },
                          {
                            name: "test122",
                            value: "test12333",
                          },
                        ],
                      },
                      {
                        ContentItem:
                          "Please upload Airport Staff Octopus Card (Front Side)",
                        name: "Front",
                        required: false,
                      },
                      {
                        ContentItem:
                          "Please upload Airport Staff Octopus Card (Back Side)",
                        name: "Back",
                        required: false,
                        cardTitle:
                          "Octopus Information (Extracted from Image Uploaded)",
                        formText: [
                          {
                            name: "Octopus No. (Exclude the no. in bracket)",
                            value: "700001111",
                          },
                        ],
                      },
                    ]}
                  />
                </>
              )}
              <Divider plain></Divider>
            </div>

            <div className="supplementary-document-upload">
              <Title level={4}>Supplementary Document Upload</Title>
              <div className="supplementary-document-upload-text">
                Supplementary documents are optional to submit, with a maximum
                of 5 documents.
              </div>
              <Collapse
                activeKey={collapsed ? [] : ["1"]}
                expandIconPosition="right"
              >
                <Panel
                  header={
                    <div style={{ display: "flex", alignItems: "center" }}>
                      <span>Supplementary Document</span>
                      <Switch
                        checked={!collapsed}
                        onChange={handleSwitchChange}
                        checkedChildren=""
                        unCheckedChildren=""
                        style={{ marginLeft: "auto" }}
                      />
                    </div>
                  }
                  key="1"
                >
                  <div className="upload-maximum">
                    Please upload a maximum of 5 supplementary documents.
                  </div>
                  <ProFormUploadDragger
                    fieldProps={{
                      itemRender: (_, file, __, remove) => (
                        <>
                          <Card
                            className="procardyyyyy"
                            style={{
                              marginTop: "10px",
                              display: "flex",
                              alignItems: "center",
                              justifyContent: "space-between",
                              width: "50%",
                            }}
                            styles={{
                              body: { width: "100%" }, // 使用 styles.body 替代 bodyStyle
                            }}
                            hoverable
                            bordered
                          >
                            <div
                              style={{
                                display: "flex",
                                alignItems: "center",
                                width: "100%",
                              }}
                            >
                              <img
                                src={FileUpload}
                                alt="FileUpload"
                                style={{
                                  width: "24px",
                                  height: "24px",
                                  marginRight: "8px",
                                }}
                              />
                              <span>{file.name}</span>
                              <CloseOutlined
                                onClick={() => remove.remove()}
                                style={{ marginLeft: "auto" }}
                              />
                            </div>
                          </Card>
                        </>
                      ),
                    }}
                    title={
                      <>
                        Drag or{" "}
                        <span
                          style={{
                            color: "#7A6145",
                            textDecoration: "underline",
                          }}
                        >
                          Browse
                        </span>
                      </>
                    }
                    icon={<img src={upload} alt="upload" />}
                    description={`The file size cannot exceed 5MB.\n
Acceptable formats for submission: PDF, PNG and JPG.`}
                    max={5}
                    label=""
                    name="supplementary"
                  ></ProFormUploadDragger>
                </Panel>
              </Collapse>
              <Divider plain></Divider>
            </div>
            {isLoggedIn !== "error" && (
              <div className="license-plate-number-registration">
                <Title level={4}>License Plate Number Registration</Title>
                <StyledTipsText>
                  Each type of vehicle can only be registered once.
                </StyledTipsText>
                <div>
                  <Space
                    style={{ width: "100%" }}
                    size={"middle"}
                    direction="vertical"
                  >
                    <UpoladItem
                      leftText="Private Car"
                      icon={privatecar}
                      formName="privateCar"
                    />
                    <UpoladItem
                      leftText="Motorcycle"
                      icon={Motorcycle}
                      formName="motorcycle"
                    />
                    <UpoladItem
                      leftText="Large Goods Vehicle"
                      icon={LGV}
                      formName="LGV"
                    />
                  </Space>
                </div>

                <Divider plain></Divider>
                {/* <ProForm.Item>
                 <SubmissionCheckbox form={form} name="checkGroup" />
               </ProForm.Item> */}
              </div>
            )}

            <ProForm.Item>
              <SubmissionCheckbox form={form} name="checkGroup" />
            </ProForm.Item>
          </ProForm>
        </div>
      </div>

      <CustomModal
        width="50%"
        icon={AlertFill}
        title="Delete All Supplementary Document?"
        content="The associated data will be permanently erased."
        onOk={handleCancel}
        onCancel={handleOk}
        isModalOpen={isModalOpen}
        changeShowModal={changeShowModal}
        btnLeftText="Cancel"
        btnRightText="Delete All"
        btnRightBgColor="#C02020"
      />

      <CustomModal
        width="40%"
        icon={AlertFill}
        title="Confirm to Submit?"
        content=""
        onOk={handleOk1}
        onCancel={handleCancel1}
        isModalOpen={isModalOpen1}
        btnLeftText="Cancel"
        btnRightText="Confirm"
      />
      {/*switch company  */}
      <CustomModal
        width="40%"
        icon={AlertFill}
        title="Update Company?"
        content="If you select a different company, your current data will be erased. Do you still want to proceed?"
        onOk={handleCancel2}
        onCancel={handleOk2}
        isModalOpen={isModalOpen2}
        btnLeftText="Cancel"
        btnRightText="Change"
        btnRightBgColor="#C02020"
      />

      {/*LPN no register  */}
      <CustomModal
        width="40%"
        icon={AlertFill}
        title="Skip License Plate Number Registration"
        content="If you choose not to register your License Plate Number now, you can do so later on the 'My License Plate Number' page after your identity is approved by the admin."
        onOk={handleOk3}
        onCancel={handleCancel3}
        isModalOpen={LPN}
        btnLeftText="Close"
        btnRightText="Confirm to Skip"
      />
    </>
  );
};

export default IdentityForm;
